<template>
    <div v-if="item.meta">
        <!-- 没有子菜单模板 -->
        <el-menu-item :index="item.path" v-if="!item.children" @click="changeRouteFn(item.path)">
            <el-icon><icon-menu /></el-icon>
            <span>
                {{ item.meta.title }}
            </span>
        </el-menu-item>
        <!-- 表示有子菜单模板 -->
        <el-sub-menu :index="item.path" v-else>
            <template #title>
                <el-icon>
                    <location />
                </el-icon>
                <span>{{ item.meta.title }}</span>
            </template>
            <!-- <el-menu-item :index="child.path" v-for="child in item.children" :key="child.path">
                <el-icon><icon-menu /></el-icon>
                <template #title>{{ child.meta.title }}</template>
            </el-menu-item> -->
            <!-- 组件的递归 -->
            <SideMenuitem v-for='child in item.children' :key="child.path" :item="child"></SideMenuitem>
        </el-sub-menu>
    </div>
</template>

<script setup lang='ts'>
//01: 引入图标组件
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue';
//02: 接收的父传子的属性props
const props = defineProps(['item']);

//03: 定义菜单点击事件, 实现切换路由
import { useRouter } from 'vue-router'
const router = useRouter();
const changeRouteFn = (path: string) => {
    router.push(path)
}


</script>
<style scoped></style>